<template>
<div class="login-bg">
    <div class="login-box-bg " :style="{left:leftStyle}"></div>
    <div class="login-box" :style="{left:leftStyle}">
        <div class="left-login">
            <div class="left-t1">企业愿景</div>
            <div class="left-t2">打造假发行业第一品牌</div>

            <div class="left-t1">企业理念</div>
            <div class="left-t2">为顾客提供优质产品和服务 为员工创造事业发展平台</div>

            <div class="left-t1">企业使命</div>
            <div class="left-t2">发扬工匠精神 让客户美丽时尚健康自信 </div>

            <div class="left-t1">企业价值观</div>
            <div class="left-t3">诚信 · 责任 · 团结 · 创新</div>
        </div>
        <div class="right-login">
            <img src="@/assets/images/logo-max.png" alt="" class="logo-max">
            <div class="login-title">会员管理系统</div>
            <div class="login-from " >
                <div class="item">
                    <span class="el-icon-user svg-icon"></span>
                    <input v-model="loginForm.phone" ref="username" type="text" ripple placeholder="手机号" @keyup.enter='loginBtn()' />
                </div>
                <div class="item">
                    <span class="el-icon-lock svg-icon"></span>
                    <input v-model="loginForm.password" ref="password" :type="passwordType" ripple placeholder="密码" @keyup.enter='loginBtn()' />
                    <svg-icon @click="showPwd" class-name="eye-icon" :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
                </div>
                <!-- <div class="btn-tab">
                    <span></span>
                    <span @click="isNext = 2" class="vs-a-tab">忘记密码？</span>
                </div> -->
                <button ripple class="flex-alc btnom" @click="loginBtn">
                    <div class="icon" v-if="loading">
                        <i class="el-icon-loading"></i>
                    </div>
                    <div>登 录</div>
                </button>
            </div>
        </div>
    </div>
</div>
</template>

<script>
    import { mapMutations, mapActions } from 'vuex';
    import { setToken, removeToken } from '@/utils/auth';
    export default {
        name: 'Login',
        data() {
            return {
                loginForm: {
                    phone: '', //15121076696
                    password: '', //123456
                },
                forget: {
                    phone: '',
                    code: '',
                    password: '',
                    repassword: '',
                },
                isCode: true,
                leftStyle:'-100%',
                codesSec: 60,
                isNext: 1,
                isPwd: false,
                intCode: -1,
                loading: false,
                redirect: undefined,
                videoFlag: localStorage.getItem('videoFlag') === 'true',
                passwordType: 'password',
                passwordType2: 'password',
                otherQuery: {},
            };
        },
        watch: {
            videoFlag(val) {
                localStorage.setItem('videoFlag', val);
            },
            isNext(val) {
                if (val == 1) {
                    this.forget = this.$options.data().forget;
                } else {
                }
            },
            $route: {
                handler: function (route) {
                    const query = route.query;
                    if (query) {
                        this.redirect = query.redirect;
                        this.otherQuery = this.getOtherQuery(query);
                    }
                },
                immediate: true,
            },
        },
        created() {
            // window.addEventListener('storage', this.afterQRScan)
            let logoUser = localStorage.getItem('logoUser');
            let accountNumber = localStorage.getItem("accountNumber");
            if(accountNumber){
                this.loginForm.phone = accountNumber;
            }
            if (logoUser) {
                let { phone, password, isPwd } = JSON.parse(logoUser);
                this.isPwd = isPwd;
                isPwd
                    ? (this.loginForm = {
                          phone,
                          password,
                      })
                    : '';
            }
        },
        mounted() {
            setTimeout(() => {
                this.leftStyle = "50%"
                if (this.loginForm.phone === '') {
                    this.$refs.username.focus();
                } else if (this.loginForm.password === '') {
                    this.$refs.password.focus();
                }
            });
        },
        methods: {
            ...mapMutations('user', ['SET_AVATAR', 'SET_NAME', 'setUserInfo']),
            ...mapActions('user', ['getAdminUser']),
            async setPassword() {
                let { phone, code, password, repassword } = this.forget;
                if (!phone) return this.$message.error('请输入手机号码');
                if (!code) return this.$message.error('请输入验证码');
                if (!password) return this.$message.error('请输入密码');
                if (!repassword) return this.$message.error('请输入确认密码');
                if (password !== repassword) return this.$message.error('两次密码不一致');
                this.loading = true;
                let res = await this.$Http.setPassword(this.forget);
                this.loading = false;
                if (res.code) {
                    this.$message.success('密码找回成功!');
                    this.isNext = 1;
                }
            },
            async getCode() {
                if (!this.isCode) return;
                let { phone } = this.forget;
                if (!phone) return this.$message.error('请输入手机号码');
                this.codesSec = 60;
                this.isCode = false;
                this.intCode = setInterval(() => {
                    this.codesSec--;
                    if (this.codesSec <= 0) {
                        clearInterval(this.intCode);
                        this.isCode = true;
                    }
                }, 1000);
                let { code, data } = await this.$Http.massCode({
                    phone,
                });
                if (code) {
                    this.$message.success('验证码已发送,注意查收');
                } else {
                    clearInterval(this.intCode);
                    this.isCode = true;
                }
            },
            checkCapslock(e) {
                const { key } = e;
                this.capsTooltip = key && key.length === 1 && key >= 'A' && key <= 'Z';
            },
            showPwd() {
                if (this.passwordType === 'password') {
                    this.passwordType = '';
                } else {
                    this.passwordType = 'password';
                }
                this.$nextTick(() => {
                    this.$refs.password.focus();
                });
            },
            showPwd2() {
                if (this.passwordType2 === 'password') {
                    this.passwordType2 = '';
                } else {
                    this.passwordType2 = 'password';
                }
                this.$nextTick(() => {
                    this.$refs.password2.focus();
                });
            },
            async loginBtn() {
                let { phone, password } = this.loginForm;
                if (!phone || !password) {
                    this.$message.error('手机号/密码不能为空');
                    return false;
                }
                let ruleForm = Object.assign({}, this.loginForm);
                this.loading = true;
                let { code, data } = await this.$Http.login(ruleForm);
                this.loading = false;
                if (code) {
                    if (this.isPwd) {
                        ruleForm.isPwd = true;
                        localStorage.setItem('logoUser', JSON.stringify(ruleForm));
                    }
                    setToken(data.user_token);
                    let isRole = await this.getAdminUser();
                    if (!isRole) {
                        this.$message.error('该账号没有后台权限');
                        removeToken();
                        return;
                    }
                    // 判断是否到期提示
                    try {
                        let ret = await this.$Http.getStoreExpiration();
                        if (ret.data) {
                            localStorage.setItem('timeoutMsg', ret.data);
                        } else {
                            localStorage.setItem('timeoutMsg', '');
                        }
                    } catch (error) {
                        console.log('获取到期提示报错');
                    }
                    localStorage.setItem('userInfo', JSON.stringify(data.user));
                    this.setUserInfo(data.user);
                    this.SET_AVATAR(data.user.avatar);
                    this.SET_NAME(data.user.username);

                    // 把账号存起来
                    localStorage.setItem("accountNumber",ruleForm.phone)
                    setTimeout(() => {
                        window.location.reload()
                    });
                    this.$message.success('登录成功!');
                }
            },
            //  忘记密码
            forgetPassword() {
                this.$confirm('忘记密码请联系管理员', '忘记密码', {
                    confirmButtonText: '确定',
                    showCancelButton: false,
                    type: 'warning',
                });
            },
            getOtherQuery(query) {
                return Object.keys(query).reduce((acc, cur) => {
                    if (cur !== 'redirect') {
                        acc[cur] = query[cur];
                    }
                    return acc;
                }, {});
            },
        },
    };
</script>

<style lang="scss" scoped>
    $bg: #fff;
    $dark_gray: #889aa4;
    $light_gray: #eee;

    input:-webkit-autofill {
        box-shadow: 0 0 0px 1000px #f9f9fb inset !important;
    }

    @media (max-width: 1360px){
        .login-box-bg,.login-box{
            transform: scale(0.8) translate(-62%, -62%) !important;
        }
    }

    @media (max-width: 900px){
        .login-box-bg,.login-box{
            transform: translate(-68.5%, -55%) scale(0.8) !important;
        }
    }
    $myColor: '#409EFF';
    .login-bg{
        background-image: url(../../assets/images/login-bg.png);
        .login-box{
            transition: all 0.6s;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 1360px;
            height: 630px;
            background: url(../../assets/images/login-bg2.png) no-repeat 100%;
            z-index: 9;
            display: flex;
            .left-login{
                width: 632px;
                height: 100%;
                padding: 67px 0 0 46px;
                // background-color: #409eff;
                .left-t1{
                    position: relative;
                    font-weight: 500;
                    font-size: 22px;
                    width: 145px;
                    height: 40px;
                    line-height: 40px;
                    padding-left: 23px;
                    color: #1a1311;
                    // text-align: center;
                    background-image: linear-gradient(90deg, rgb(248, 154, 6), #fff);
                    &::before{
                        content: "";
                        position: absolute;
                        left: 15px;
                        width: 2px;
                        height: 100%;
                        background: #fff;
                    }
                }
                .left-t2{
                    margin: 24px 0 30px;
                    font-size: 21px;
                    font-weight: 600;
                    text-align: left;
                    color: #1a1311;
                    line-height: 25px;
                }
                .left-t3{
                    margin-top: 30px;
                    white-space: nowrap;
                    font-size: 36px;
                    font-weight: 500;
                    text-align: left;
                    color: #e53c29;
                    line-height: 43px;
                }
            }
            .right-login{
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                .login-title{
                    font-size: 30px;
                    margin: 30px 0;
                }
                img{
                    margin-top: 60px;
                    width: 150px;
                    height: auto;
                }
            }
        }
        .login-box-bg{
            transition: all 0.6s;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 1360px;
            height: 630px;
            z-index: 2;
            &::before{
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                width: 950px;
                height: 630px;
                background: #ffffff82;
            }
        }
    }
    .login-from {
        width: 336px;
        .btn-tab {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }

        .item {
            margin-bottom: 30px;
            position: relative;

            .phone-code {
                position: absolute;
                z-index: 2;
                top: 50%;
                right: 15px;
                transform: translateY(-50%);
                color: #999999;
                font-size: 20px;
                padding: 10px;
                cursor: pointer;
            }

            .svg-icon {
                position: absolute;
                z-index: 2;
                top: 50%;
                left: 15px;
                transform: translateY(-50%);
                color: #999999;
                font-size: 20px;

                &.eye-icon {
                    cursor: pointer;
                    left: auto;
                    right: 15px;
                    position: absolute;
                }
            }

            input {
                height: 48px;
                line-height: 48px;
                padding: 0 40px;
                background: #f9f9fb;
                //color: #999999;
                border-radius: 10px;
                width: 100%;
                transition: 0.5s;
                outline: none;
                box-sizing: border-box;
                border: 1px solid #e6e6e6;

                &::-webkit-input-placeholder {
                    color: #dfdfde;
                }

                &:focus {
                    border-radius: 10px;
                    border: 1px solid #F89A06;
                }
            }
        }

        .btnom {
            background: rgb(249, 159, 12);
            color: #ffffff;
            line-height: 50px;
            padding: 0 100px;
            width: 336px;
            border-radius: 100px;
            white-space: nowrap;
            border: none;
            margin: 0 auto;
            cursor: pointer;
            justify-content: center;
            transition: 0.3s;
            margin-top: 50px;
            text-align: center;
            // box-shadow: 0px 3px 10px 2px rgba(150, 162, 255, 0.52);
            // opacity: 0.8;

            @keyframes rotate {
                from {
                    transform: rotate(0deg);
                }

                to {
                    transform: rotate(359deg);
                }
            }

            .icon {
                // animation: rotate 1.5s linear infinite;
                margin-right: 10px;
            }

            &:hover {
                opacity: 1;
                box-shadow: 0px 3px 10px 2px rgba(250, 159, 13, 0.52);
            }
        }
    }
    @mixin flex {
        display: flex;
    }

    @mixin flex-btn {
        @include flex();
        justify-content: space-between;
    }

    @mixin flex-alc {
        @include flex();
        align-items: center;
    }

    .flex {
        @include flex();
    }

    .flex-btn {
        @include flex-btn();
    }

    .flex-alc {
        @include flex-alc();
    }

    .w-100 {
        width: 100%;
    }

    .block {
        display: block;
    }

    .text-center {
        text-align: center;
    }

    .flex-zi {
        margin-top: 40px;

        & > button {
            flex: 1;
            min-height: 50px;
            border-radius: 25px;
        }
    }

    .login-bg {
        @include flex-btn();
        @include flex-alc();
        overflow: hidden;
        height: 100%;
        width: 100%;

        .login-left {
            flex: 3;
            flex-shrink: 0;
            position: relative;
            height: 100%;
            z-index: 1000;
            overflow: hidden;

            .video-icon {
                position: absolute;
                right: 40px;
                top: 40px;
                cursor: pointer;

                i {
                    font-size: 20px;
                    color: #fff;
                }
            }

            video {
                width: 100vw;
                display: block;
                position: absolute;
                height: 100%;
                object-fit: cover;
                z-index: -1;
                left: -40%;
            }

            img {
                height: 100%;
                object-fit: cover;
                display: block;
                width: 100vw;
                position: absolute;
                left: -40%;
                z-index: -2;
            }

            .left-text {
                position: absolute;
                top: 100px;
                left: 40px;
                z-index: 2;
                color: #fff;
            }
        }

        .login-container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex: 2;
            min-width: 570px;
            background: #ffffff;
            height: 100vh;
            position: relative;
            box-shadow: 0px 8px 57.12px 10.88px rgba(0, 0, 0, 0.53);

            .login-box {
                width: 70%;

                .title {
                    color: #67656d;
                    // font-size: 40px;
                    text-align: left;
                    font-family: 'Arial Hebrew Scholar';
                    margin-bottom: 100px;
                }
            }
        }

        .power {
            position: absolute;
            bottom: 30px;
            // right: 20px;
            font-size: 14px;
            width: 40%;
            text-align: center;
            color: #999;

            a {
                color: #409eff;
            }
        }

        .power-logo {
            position: absolute;
            right: 20px;
            width: 150px;
            top: 30px;

            img {
                display: block;
                width: 100%;
            }
        }
    }

    .animatedinia {
        animation-duration: 1s;
        animation-fill-mode: both;
        animation-iteration-count: 1;
    }

    .bounce-inRight {
        animation-name: bounceInRight;
    }

    .bounceInLeft {
        animation-name: bounceInLeft;
    }

    @keyframes bounceInLeft {
        0% {
            opacity: 0;
            transform: translateX(-500px);
        }

        60% {
            opacity: 1;
            transform: translateX(20px);
        }

        80% {
            transform: translateX(0px);
        }

        100% {
            transform: translateX(0);
        }
    }

    @keyframes bounceInRight {
        0% {
            opacity: 0;
            transform: translateX(500px);
        }

        60% {
            opacity: 1;
            transform: translateX(-20px);
        }

        80% {
            transform: translateX(0px);
        }

        100% {
            transform: translateX(0);
        }
    }
</style>
